function a(ele){return document.querySelector(ele)}
function c(ele){return document.createElement(ele)}

//ajax_get
function ajax_get(url){
    return new Promise((resolve,reject)=>{
        let xhr=new XMLHttpRequest()
        xhr.open("get",url,true)
        xhr.send()
        xhr.onreadystatechange=()=>{
            if(xhr.readyState === 4 && xhr.status === 200){
                resolve(xhr.responseText)
            }
        }
    })
}
//ajax_post
function ajax_post(url,str){
    return new Promise((resolve,reject)=>{
        let xhr=new XMLHttpRequest()
        xhr.open("post",url,true)
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
        xhr.send(str)
        xhr.onreadystatechange=()=>{
            if(xhr.readyState === 4 && xhr.status === 200){
                resolve(xhr.responseText)
            }
        }
    })
}

window.onload=()=>{
    if(!localStorage.getItem("star")){
        localStorage.setItem("star","[]")
    }
    // if(!localStorage.getItem("detail")){
    //     localStorage.setItem("detail","[]")
    // }
    ajax_get("./get.php").then(result=>{
        let arr=JSON.parse(result)
        localStorage.setItem("star",JSON.stringify(arr))
        let star_arr=JSON.parse(localStorage.getItem("star"))
        create_star(star_arr)
    })
}

//渲染staryem
function create_star(star_arr){
    a("section").innerHTML=""
    let newArr=JSON.parse(localStorage.getItem("local_star"))
    let dataArr=[]
    let result=[]
    //去重！！
    for(let k in newArr){
        if(!dataArr.includes(newArr[k].collect)){
            dataArr.push(newArr[k].collect)
        }
    }
    //数组间的比较过滤/JS取出两个数组相同元素，非常重要！！
    for(let i in star_arr){
        var obj=star_arr[i]
        var num1=star_arr[i].id
        for(let j in dataArr){
            var num2=dataArr[j]
            if(num2 === num1){
                result.push(obj)
            }
        }
    }
    //根据result渲染
    for(let l of result){
        let main=$("<div></div>")
        main.addClass("main").attr("tag",l.id)
        let img=$("<img>")
        img.addClass("main-img").attr("src","./img/"+l.id+".jpg")
        let name=$("<div></div>")
        name.addClass("name").text(l.product_name)
        let size=$("<div></div>")
        size.addClass("size").text(l.product_size+"码")
        let box=$("<div></div>")
        box.addClass("box").append($(name).append($(size)))
        let price=$("<div></div>")
        price.addClass("price").text("￥"+l.product_price)
        let item=$("<input>")
        item.attr("type","button").attr("id","item").attr("tag",l.id).val("详情")
        item.on("click",function(){
            let a=$(this).attr("tag")
            window.location.href="http://localhost/mogujie/detail.html"+"?id="+a
            // let obj={
            //     id:a
            // }
            // localStorage.setItem("detail",JSON.stringify(obj))
        })
        let del=$("<input>")
        del.attr("type","button").attr("id","del").attr("tag",l.id).val("删除")
        del.on("click",function(){
            ajax_get("./get.php").then(result=>{
                let newArr=[]
                let b=$(this).attr("tag")
                let c=JSON.parse(localStorage.getItem("local_star"))
                let dataArr=c.filter((item)=>{
                    return item.collect === b
                })
                for(let i of c){
                    if(i.collect == dataArr[0].collect){
                        continue
                    }else{
                        newArr.push(i)
                    }
                }
                localStorage.setItem("local_star",JSON.stringify(newArr))
                let arr=JSON.parse(result)
                localStorage.setItem("star",JSON.stringify(arr))
                let star_arr=JSON.parse(localStorage.getItem("star"))
                create_star(star_arr)
            })
        })
        let form=$("<form></form>")
        form.attr("id","form").append($(item)).append($(del))
        let right=$("<div></div>")
        right.addClass("right").append($(box)).append($(price)).append($(form))
        main.append($(img)).append($(right))
        $("section").append($(main))
    }
}